<template>
	<view class="wrap">
		<view class="topBc"></view>
		<view class="content formWrap">
			<view class="title" style="margin-top: 0;">
				<text>社保信息</text>
			</view>
			
			<u-form :model="formData" ref="uForm" :rules="rules">
				<u-form-item v-if="formKeys.so110" label="城镇职工基本养老保险（人）" prop="so110" required label-width="460rpx" borderBottom>
					<u-input v-model="formData.so110" type="number" placeholder="请输入" border="none" inputAlign="right">
						<u--text
							text="人"
							slot="suffix"
						></u--text>
					</u-input>
				</u-form-item>
				<u-form-item v-if="formKeys.so210" label="失业保险（人）" prop="so210" required label-width="460rpx" borderBottom>
					<u-input v-model="formData.so210" type="number" placeholder="请输入" border="none" inputAlign="right">
						<u--text
							text="人"
							slot="suffix"
						></u--text>
					</u-input>
				</u-form-item>
				<u-form-item v-if="formKeys.so310" label="职工基本医疗保险（人）" prop="so310" required label-width="460rpx" borderBottom>
					<u-input v-model="formData.so310" type="number" placeholder="请输入" border="none" inputAlign="right">
						<u--text
							text="人"
							slot="suffix"
						></u--text>
					</u-input>
				</u-form-item>
				<u-form-item v-if="formKeys.so410" label="工伤保险（人）" prop="so410" required label-width="460rpx" borderBottom>
					<u-input v-model="formData.so410" type="number" placeholder="请输入" border="none" inputAlign="right">
						<u--text
							text="人"
							slot="suffix"
						></u--text>
					</u-input>
				</u-form-item>
				<u-form-item v-if="formKeys.so510" label="生育保险（人）" prop="so510" required label-width="460rpx" borderBottom>
					<u-input v-model="formData.so510" type="number" placeholder="请输入" border="none" inputAlign="right">
						<u--text
							text="人"
							slot="suffix"
						></u--text>
					</u-input>
				</u-form-item>
				
				
				<view class="title">
					<text>单位缴费基数</text>
					<view v-if="formKeys.totalwagesdis" class="u-radio-group_wrap">
						<u-radio-group v-model="formData.totalwagesdis" placement="row">
							<u-radio v-for="item,index in stateRanges" :key="index" :label="item.text" :name="item.value" :activeColor="bgColor"></u-radio>
						</u-radio-group>
					</view>
				</view>
				<u-form-item v-if="formKeys.totalwagesSo110" label="单位参加城镇职工基本养老保险缴费基数" prop="totalwagesSo110" required label-width="460rpx" borderBottom>
					<u-input v-model="formData.totalwagesSo110" type="number" placeholder="请输入" border="none" inputAlign="right">
						<view class="units_suffix" slot="suffix">
							<text><text class="units_suffix_colorRed">万</text>(元)</text>
						</view>
					</u-input>
				</u-form-item>
				<u-form-item v-if="formKeys.totalwagesSo210" label="单位参加失业保险缴费基数" prop="totalwagesSo210" required label-width="460rpx" borderBottom>
					<u-input v-model="formData.totalwagesSo210" type="number" placeholder="请输入" border="none" inputAlign="right">
						<view class="units_suffix" slot="suffix">
							<text><text class="units_suffix_colorRed">万</text>(元)</text>
						</view>
					</u-input>
				</u-form-item>
				<u-form-item v-if="formKeys.totalwagesSo310" label="单位参加职工基本医疗保险缴费基数" prop="totalwagesSo310" required label-width="460rpx" borderBottom>
					<u-input v-model="formData.totalwagesSo310" type="number" placeholder="请输入" border="none" inputAlign="right">
						<view class="units_suffix" slot="suffix">
							<text><text class="units_suffix_colorRed">万</text>(元)</text>
						</view>
					</u-input>
				</u-form-item>
				<u-form-item v-if="formKeys.totalwagesSo510" label="单位参加生育保险缴费基数" prop="totalwagesSo510" required label-width="460rpx" borderBottom>
					<u-input v-model="formData.totalwagesSo510" type="number" placeholder="请输入" border="none" inputAlign="right">
						<view class="units_suffix" slot="suffix">
							<text><text class="units_suffix_colorRed">万</text>(元)</text>
						</view>
					</u-input>
				</u-form-item>
				
				<view class="title">
					<text>本期实际缴费金额</text>
					<view v-if="formKeys.totalpaymentdis" class="u-radio-group_wrap">
						<u-radio-group v-model="formData.totalpaymentdis" placement="row">
							<u-radio v-for="item,index in stateRanges" :key="index" :label="item.text" :name="item.value" :activeColor="bgColor"></u-radio>
						</u-radio-group>
					</view>
				</view>
				<u-form-item v-if="formKeys.totalpaymentSo110" label="参加城镇职工基本养老保险本期实际缴费金额" prop="totalpaymentSo110" required label-width="460rpx" borderBottom>
					<u-input v-model="formData.totalpaymentSo110" type="number" placeholder="请输入" border="none" inputAlign="right">
						<view class="units_suffix" slot="suffix">
							<text><text class="units_suffix_colorRed">万</text>(元)</text>
						</view>
					</u-input>
				</u-form-item>
				<u-form-item v-if="formKeys.totalpaymentSo210" label="参加失业保险本期实际缴费金额" prop="totalpaymentSo210" required label-width="460rpx" borderBottom>
					<u-input v-model="formData.totalpaymentSo210" type="number" placeholder="请输入" border="none" inputAlign="right">
						<view class="units_suffix" slot="suffix">
							<text><text class="units_suffix_colorRed">万</text>(元)</text>
						</view>
					</u-input>
				</u-form-item>
				<u-form-item v-if="formKeys.totalpaymentSo310" label="参加职工基本医疗保险本期实际缴费金额" prop="totalpaymentSo310" required label-width="460rpx" borderBottom>
					<u-input v-model="formData.totalpaymentSo310" type="number" placeholder="请输入" border="none" inputAlign="right">
						<view class="units_suffix" slot="suffix">
							<text><text class="units_suffix_colorRed">万</text>(元)</text>
						</view>
					</u-input>
				</u-form-item>
				<u-form-item v-if="formKeys.totalpaymentSo410" label="参加工伤保险本期实际缴费金额" prop="totalpaymentSo410" required label-width="460rpx" borderBottom>
					<u-input v-model="formData.totalpaymentSo410" type="number" placeholder="请输入" border="none" inputAlign="right">
						<view class="units_suffix" slot="suffix">
							<text><text class="units_suffix_colorRed">万</text>(元)</text>
						</view>
					</u-input>
				</u-form-item>
				<u-form-item v-if="formKeys.totalpaymentSo510" label="参加生育保险本期实际缴费金额" prop="totalpaymentSo510" required label-width="460rpx" borderBottom>
					<u-input v-model="formData.totalpaymentSo510" type="number" placeholder="请输入" border="none" inputAlign="right">
						<view class="units_suffix" slot="suffix">
							<text><text class="units_suffix_colorRed">万</text>(元)</text>
						</view>
					</u-input>
				</u-form-item>
				
				
				<view class="title">
					<text>单位累计欠缴金额</text>
					<view v-if="formKeys.unpaidsocialinsdis" class="u-radio-group_wrap">
						<u-radio-group v-model="formData.unpaidsocialinsdis" placement="row">
							<u-radio v-for="item,index in stateRanges" :key="index" :label="item.text" :name="item.value" :activeColor="bgColor"></u-radio>
						</u-radio-group>
					</view>
				</view>
				<u-form-item v-if="formKeys.unpaidsocialinsSo110" label="单位参加城镇职工基本养老保险累计欠缴金额" prop="unpaidsocialinsSo110" required label-width="460rpx" borderBottom>
					<u-input v-model="formData.unpaidsocialinsSo110" type="number" placeholder="请输入" border="none" inputAlign="right">
						<view class="units_suffix" slot="suffix">
							<text><text class="units_suffix_colorRed">万</text>(元)</text>
						</view>
					</u-input>
				</u-form-item>
				<u-form-item v-if="formKeys.unpaidsocialinsSo210" label="单位参加失业保险累计欠缴金额" prop="unpaidsocialinsSo210" required label-width="460rpx" borderBottom>
					<u-input v-model="formData.unpaidsocialinsSo210" type="number" placeholder="请输入" border="none" inputAlign="right">
						<view class="units_suffix" slot="suffix">
							<text><text class="units_suffix_colorRed">万</text>(元)</text>
						</view>
					</u-input>
				</u-form-item>
				<u-form-item v-if="formKeys.unpaidsocialinsSo310" label="单位参加职工基本医疗保险累计欠缴金额" prop="unpaidsocialinsSo310" required label-width="460rpx" borderBottom>
					<u-input v-model="formData.unpaidsocialinsSo310" type="number" placeholder="请输入" border="none" inputAlign="right">
						<view class="units_suffix" slot="suffix">
							<text><text class="units_suffix_colorRed">万</text>(元)</text>
						</view>
					</u-input>
				</u-form-item>
				<u-form-item v-if="formKeys.unpaidsocialinsSo410" label="单位参加工伤保险累计欠缴金额" prop="unpaidsocialinsSo410" required label-width="460rpx" borderBottom>
					<u-input v-model="formData.unpaidsocialinsSo410" type="number" placeholder="请输入" border="none" inputAlign="right">
						<view class="units_suffix" slot="suffix">
							<text><text class="units_suffix_colorRed">万</text>(元)</text>
						</view>
					</u-input>
				</u-form-item>
				<u-form-item v-if="formKeys.unpaidsocialinsSo510" label="单位参加生育保险累计欠缴金额" prop="unpaidsocialinsSo510" required label-width="460rpx" borderBottom>
					<u-input v-model="formData.unpaidsocialinsSo510" type="number" placeholder="请输入" border="none" inputAlign="right">
						<view class="units_suffix" slot="suffix">
							<text><text class="units_suffix_colorRed">万</text>(元)</text>
						</view>
					</u-input>
				</u-form-item>

			</u-form>
			
		</view>
		<view class="submitBtn_bc"></view>
		<view class="submitBtn_ubtn">
			<u-button :disabled="!$util.submitState(year,state)" @click="submit()">提交</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data(){
		return{
			minFormName: 'socsecinfo', //小表单类型名
			regnoInfo: this.$store.state.regnoInfo,
			year: '',
			state: '',
			bgColor: this.$config.bgColor,
			
			empnum: '',
			
			stateRanges: [
				{text: '公示',value: '1'},
				{text: '不公示',value: '2'}
			],
			
			formData: {
				so110: '',
				so210: '',
				so310: '',
				so410: '',
				so510: '',
				
				totalwagesSo110: '',
				totalwagesSo210: '',
				totalwagesSo310: '',
				totalwagesSo510: '',
				totalwagesdis: '',

				totalpaymentSo110: '',
				totalpaymentSo210: '',
				totalpaymentSo310: '',
				totalpaymentSo410: '',
				totalpaymentSo510: '',
				totalpaymentdis: '',
				
				unpaidsocialinsSo110: '',
				unpaidsocialinsSo210: '',
				unpaidsocialinsSo310: '',
				unpaidsocialinsSo410: '',
				unpaidsocialinsSo510: '',
				unpaidsocialinsdis: '',
				
			},
			rules: {},
			rulesAll: {
				so110: this.$typeData.ruleData.peopleRule,
				so210: this.$typeData.ruleData.peopleRule,
				so310: this.$typeData.ruleData.peopleRule,
				so410: this.$typeData.ruleData.peopleRule,
				so510: this.$typeData.ruleData.peopleRule,
				
				totalwagesSo110: this.$typeData.ruleData.moneyRule,
				totalwagesSo210: this.$typeData.ruleData.moneyRule,
				totalwagesSo310: this.$typeData.ruleData.moneyRule,
				totalwagesSo510: this.$typeData.ruleData.moneyRule,
				totalwagesdis: this.$typeData.ruleData.disRule,
				
				totalpaymentSo110: this.$typeData.ruleData.moneyRule,
				totalpaymentSo210: this.$typeData.ruleData.moneyRule,
				totalpaymentSo310: this.$typeData.ruleData.moneyRule,
				totalpaymentSo410: this.$typeData.ruleData.moneyRule,
				totalpaymentSo510: this.$typeData.ruleData.moneyRule,
				totalpaymentdis: this.$typeData.ruleData.disRule,
				
				unpaidsocialinsSo110: this.$typeData.ruleData.moneyRule,
				unpaidsocialinsSo210: this.$typeData.ruleData.moneyRule,
				unpaidsocialinsSo310: this.$typeData.ruleData.moneyRule,
				unpaidsocialinsSo410: this.$typeData.ruleData.moneyRule,
				unpaidsocialinsSo510: this.$typeData.ruleData.moneyRule,
				unpaidsocialinsdis: this.$typeData.ruleData.disRule,
			},
			formKeys: {},
			
		}
	},
	onLoad(option) {
		this.year = option.year;
		this.state = option.state;
		this.empnum = option.empnum;
		this.getFormKey();
		this.getFormData();
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules)
	},
	methods:{
		// 获取小表单数据
		getFormData(){
			let url = this.$typeData.minFormUrl.get(this.minFormName);
			if(!url){
				uni.showModal({
					title: '暂无接口'
				})
				return;
			}
			this.$http.sendRequest({
				url: url,
				data: {
					regno: this.regnoInfo.regno,
					ancheyear: this.year
				}
			})
			.then(res=>{
				console.log('接口返回',res.data);
				let data = res.data[0];
				let keys = Object.keys(this.formKeys);
				keys.forEach(item=>{
					this.formData[item] = data[item];
				})
				console.log(789789,this.formData);
			})
			.catch(err=>{})
		},
		//获取小表单拥有字段
		getFormKey(){
			let formKeys = this.$util.getFormKeys(this.minFormName,this.regnoInfo.enttype);
			this.formKeys = formKeys;
			let keys = Object.keys(formKeys);
			keys.forEach(item=>{
				this.rules[item] = this.rulesAll[item];
			})
		},
		submit(){
			let _this = this;
			this.$refs.uForm.validate().then(res => {
				this.saveBtn();
			}).catch(errors => {
				this.$util.showToast({title:'请完善信息'})
			})
		},
		saveBtn(){
			let data = this.$util.setSaveFormData(this.formKeys,'',this.formData);
			this.$http.sendRequest({
				url: '/annual/report/socsecinfo/overwrite',
				method: 'PUT',
				data: {
					regno: this.regnoInfo.regno,
					ancheyear: this.year,
					socsecinfoList: [data]
				}
			})
			.then(res=>{
				this.setRecord();
			})
			.catch(err=>{})
		},
		
		
		
		//存一下记录
		setRecord(){
			let fillingItem = this.$minFormType.get(this.minFormName);
			this.$http.sendRequest({
				url: '/annual/report/record',
				method: 'POST',
				data: {
					regno: this.regnoInfo.regno,
					year: this.year,
					fillingItem: fillingItem,
					isImp: '0',
				},
				hideLoad: true,
			})
			.then(res=>{
				uni.navigateBack();
			})
			.catch(err=>{})
		},
		goPage(path){
			uni.navigateTo({
				url: path
			})
		},
	}
}
</script>

<style lang="scss">
.wrap{
	width: 100vw;
	min-height: 100vh;
	padding-top: 16rpx;
	box-sizing: border-box;
	position: relative;
	background-color: #FFF;
	
	.topBc{
		height: 10rpx;
		background-color: #F5F6F8;
	}
}

.content{
	padding: 30rpx 36rpx;
	background-color: #FFF;
	
	.title{
		color: #E4B269;
		font-size: 36rpx;
		font-weight: bold;
		border-left: 8rpx solid #E4B269;
		line-height: 40rpx;
		padding-left: 16rpx;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.hint{
			background-color: teal;

		}
	}
	
}

.u-radio-group_wrap{
	.u-radio{
		margin-left: 20rpx;
		margin-right: 0;
	}
}

</style>